import Svg,{
  Circle,
  Ellipse,
  G,
  Text,
  TSpan,
  TextPath,
  Path,
  Polygon,
  Polyline,
  Line,
  Rect,
  Use,
  Image,
  Symbol,
  Defs,
  LinearGradient,
  RadialGradient,
  Stop,
  ClipPath,
  Pattern,
  Mask,
} from 'react-native-svg';

/* Use this if you are using Expo
import { Svg } from 'expo';
const { Circle, Rect } = Svg;
*/

import React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';

// Percentages work in plain react-native but aren't supported in Expo yet, workaround with this or onLayout
const { width, height } = Dimensions.get('window');

export default class SvgExample extends React.Component {

  state={
    r:20
  }

  componentDidMount(){
    this.timmer = setInterval(()=>{
      if(this.state.r<50){
        this.setState({
          r:this.state.r+5
        })
      }
    },1000)
  }

  render() {
    return (
      <View style={{...StyleSheet.absoluteFill,alignItems: 'center', justifyContent: 'center' }}>
        <Svg height={height } width={width } viewBox="0 0 100 100">
          <Circle
            cx="50"
            cy="50"
            r={this.state.r+""}
            stroke="blue"
            strokeWidth="2.5"
            fill="green"
          />
          <Rect
            x="32.5"
            y="32.5"
            width="35"
            height="35"
            stroke="red"
            strokeWidth="2"
            fill="yellow"
          />
        </Svg>
      </View>
    );
  }
}